import { useState, useMemo, useRef, useEffect, LegacyRef } from 'react';
import Sub3A from './sub3A';
import Sub3B from './sub3B';
export default function Sub3() {
  const [count, setCount] = useState<number>(0);
  const [textA, setTextA] = useState('A');
  const [textB, setTextB] = useState('B');
  const subA = useMemo(() => <Sub3A text={textA} />, [textA])
  const subB = useMemo(() => <Sub3B text={textB} />, [textB])
  const inputEl = useRef<HTMLInputElement>()
  const [text, SetText] = useState('nothing')
  const textRef = useRef<string>('')
  useEffect(() => {
    textRef.current = text
    console.log(textRef.current);
  }, [text])
  return (
    <div>
      <div>
        <span>{count}</span>
        <br />
        <button
          onClick={() => {
            setCount(count + 1);
            setCount(count + 2);
          }}
        >
          +
        </button>
        <br />
        <button
          onClick={() => {
            setCount(count - 1);
          }}
        >
          -
        </button>
      </div>
      <div>
        {/* <Sub3A text={textA}></Sub3A>
        <Sub3B text={textB}></Sub3B> */}
        {subA}
        {subB}
        <button onClick={() => setTextA('改变后的A')}>改变A</button>
        <button onClick={() => setTextB('改变后的B')}>改变B</button>
      </div>
      <div>
        <input type="text" ref={inputEl as LegacyRef<HTMLInputElement>} />
        <button onClick={() => {
          inputEl.current!.value = '123'
        }}>点我改变input的值</button>
        <button onClick={() => {
          SetText((inputEl.current! as HTMLInputElement).value)
          console.log(text);
        }}>点我更改log的值</button>
      </div>
    </div>
  );
}
